<template>
  <div style="margin: 20px 20px">
    <el-card>
      <div slot="header" class="clearfix">
        车牌号码：<el-input v-model="params.carNumber" placeholder="请输入车牌号码" style="width: 220px; margin:0 10px" />
        缴纳状态：<el-select v-model="params.paymentStatus" placeholder="请输入车牌号码" style="width: 220px; margin:0 10px">
          <el-option>全部</el-option>
          <el-option :value="1" label="已缴纳" />
          <el-option :value="0" label="未缴纳" />
        </el-select>
        <el-button type="primary" @click="onInquire">查询</el-button>
      </div>
      <el-table :data="list">
        <el-table-column label="序号" width="80">
          <template #default="{$index}">
            {{ $index+1 +10*(params.page - 1) }}
          </template>
        </el-table-column>
        <el-table-column label="车牌号码" prop="carNumber" />
        <el-table-column label="收费类型" prop="chargeType">
          <template #default="{row}">
            <span v-if="row.chargeType==='card'">月卡</span>
            <span v-else>临时停车</span>
          </template>
        </el-table-column>
        <el-table-column label="停车总时长" prop="parkingTime" />
        <el-table-column label="缴纳费用 (元)" prop="actualCharge" />
        <el-table-column label="缴纳状态" prop="paymentStatus">
          <template #default="{row}">
            {{ row.paymentStatus===1?'已缴纳':'未缴纳' }}
          </template>
        </el-table-column>
        <el-table-column label="缴纳方式" prop="paymentMethod">
          <template #default="{row}">
            <span v-if="row.paymentMethod==='Alipay'">支付宝</span>
            <span v-else-if="row.paymentMethod==='WeChat'">微信</span>
            <span v-else-if="row.paymentMethod==='Cash'">线下</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="缴纳时间" prop="paymentTime" />
      </el-table>
    </el-card>
    <el-row type="flex" justify="end">
      <el-pagination
        :current-page="params.page"
        :page-size="params.pageSize"
        layout="total, prev, pager, next, sizes,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="changePage"
      />
    </el-row>
  </div>
</template>

<script>
import { getListStopFeeAPI } from '@/api/stopFee'
export default {
  data() {
    return {
      list: [],
      params: {
        page: 1,
        pageSize: 10,
        carNumber: '',
        paymentStatus: ''
      },
      total: 10
    }
  },
  created() {
    this.onLoad()
  },
  methods: {
    // 点击查询
    onInquire() {
      this.onLoad()
    },
    async onLoad() {
      const res = await getListStopFeeAPI(this.params)
      console.log(res)
      this.list = res.data.rows
      this.total = res.data.total
    },
    // 监听当前页
    changePage(val) {
      this.params.page = val
      this.onLoad()
    },
    // 监听点击选择每页多少条数据
    handleSizeChange(val) {
      this.params.pageSize = val
      this.onLoad()
    }
  }
}
</script>

<style>

</style>
